<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>1. Vue移动端 项目初始化 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vant, Vue, Vue移动端" />
  
  <meta name="description" content="::: tip 介绍 Vue移动端项目初始化:::">
<meta property="og:type" content="article">
<meta property="og:title" content="1. Vue移动端 项目初始化">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/06/02/Vue_Mobile_Projects/2_ready/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍 Vue移动端项目初始化:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-06-01T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.545Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="Vue移动端">
<meta property="article:tag" content="Vant">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">1. Vue移动端 项目初始化</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-06-02</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~7.59K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178545"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍</p>
<p>Vue移动端项目初始化<br><br>:::</p>
<span id="more"></span>

<p>项目初始化</p>
<blockquote>
<p>首先，黑马头条移动端是一个IT资讯移动<strong>web应用</strong>，有着和今日头条一样的资讯浏览体验。</p>
<p>主要功能：资讯列表、标签页切换，文章举报，频道管理、离线频道，文章详情、阅读记忆，关注功能、点赞功能、评论功能、回复评论、搜索功能、登录功能、个人中心、编辑资料、小智同学。</p>
</blockquote>
<blockquote>
<p>总结：移动Web项目（网站）；App(Android(Java),IOS(Swift))&#x2F;React Native &#x2F; Flutter(Dart) &#x2F; Uniapp</p>
</blockquote>
<h2 id="项目技术选型"><a href="#项目技术选型" class="headerlink" title="项目技术选型"></a>项目技术选型</h2><ul>
<li>项目业务功能分析</li>
<li>项目技术栈<ul>
<li>vue 核心vue</li>
<li>vue-router 路由插件</li>
<li>axios 请求插件</li>
<li>json-bigint 最大安全数值处理</li>
<li>vant 移动组件库(有赞)</li>
<li>amfe-flexible  rem适配</li>
</ul>
</li>
<li>开发依赖<ul>
<li>babel  ES转换器</li>
<li>less  css预处理器</li>
<li>postcss  css后处理器</li>
<li>vue-cli  vue项目脚手架</li>
</ul>
</li>
</ul>
<h2 id="项目初始化"><a href="#项目初始化" class="headerlink" title="项目初始化"></a>项目初始化</h2><blockquote>
<p>目标：基于Vue脚手架初始化项目</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create hm-toutiao-mobile-128</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：参考详细文档说明【03-resource&#x2F;脚手架手动创建项目】</p>
<p>注意：vue-router、less、eslint + standard</p>
</blockquote>
<ul>
<li>分析每一个文件的作用和具体代码的细节</li>
</ul>
<blockquote>
<p>总结：配置路由映射时，可以添加name属性给路径起一个别名，跳转路由时可以使用。</p>
</blockquote>
<h2 id="调整项目目录结构"><a href="#调整项目目录结构" class="headerlink" title="调整项目目录结构"></a>调整项目目录结构</h2><blockquote>
<p>目标：根据功能模块调整项目的目录结构</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">├─api               <span class="comment">#接口函数（封装接口调用相关模块）</span></span><br><span class="line">├─assets            <span class="comment">#静态资源（静态资源）</span></span><br><span class="line">├─components        <span class="comment">#公用组件（被重复利用的组件）</span></span><br><span class="line">├─styles            <span class="comment">#less代码</span></span><br><span class="line">├─utils             <span class="comment">#工具模块（封装一些通用的js模块）</span></span><br><span class="line">└─views             <span class="comment">#路由页面</span></span><br><span class="line">    ├─home          <span class="comment">#首页模块</span></span><br><span class="line">    ├─video         <span class="comment">#视频模块</span></span><br><span class="line">    ├─question      <span class="comment">#问答模块</span></span><br><span class="line">    ├─user          <span class="comment">#用户模块</span></span><br><span class="line">    └─Layout.vue    <span class="comment">#公用布局</span></span><br><span class="line">├─App.vue           <span class="comment">#根组件</span></span><br><span class="line">├─router            <span class="comment">#路由文件</span></span><br><span class="line">|-main.js           <span class="comment">#项目的入口文件</span></span><br></pre></td></tr></table></figure>

<h2 id="项目代码git管理"><a href="#项目代码git管理" class="headerlink" title="项目代码git管理"></a>项目代码git管理</h2><blockquote>
<p>目标：基于git管理项目代码</p>
</blockquote>
<ol>
<li><p>创建远程仓库</p>
<ul>
<li>图形界面创建</li>
</ul>
</li>
<li><p>提交代码</p>
<ul>
<li><p>git init </p>
</li>
<li><p>git add .</p>
</li>
<li><p>git commit -m ‘初始化版本’</p>
</li>
</ul>
</li>
<li><p>推送到远程仓库</p>
<ul>
<li>git remote add origin <a target="_blank" rel="noopener" href="https://gitee.com/wzj1031/hm-toutiao-mobile-128.git">https://gitee.com/wzj1031/hm-toutiao-mobile-128.git</a></li>
<li>git push -u origin master</li>
</ul>
</li>
</ol>
<blockquote>
<p>如果希望提交空目录，需要在目录中创建一个.gitkeep文件</p>
</blockquote>
<h2 id="代码规范ESLint配置"><a href="#代码规范ESLint配置" class="headerlink" title="代码规范ESLint配置"></a>代码规范ESLint配置</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><blockquote>
<p>无规矩不成方圆（正规团队对项目的代码是有严格规范）</p>
<p>代码的规范谁来保证？人工方式靠谱吗，不靠谱，所以需要工具</p>
</blockquote>
<ul>
<li><a target="_blank" rel="noopener" href="https://cn.eslint.org/">ESLint</a> 是什么？是验证代码规范的工具（如果你写的代码不符合规范，它会告诉你哪里写错了），ESLint本身提供了一些规范，ESLint提供的这些规范我们做项目是全部遵循吗（大概率是遵循一部分），因此，就有一个问题：如果不同的团队单独指定规范的话，其实也挺乱的。所以说应该有一个通用的约定。</li>
<li><a target="_blank" rel="noopener" href="https://standardjs.com/readme-zhcn.html">standard</a> 是相对比较客观的一套通用规则，如果很多团队都采用，那么规范就统一了</li>
<li>ESLint负责规则验证，并且本身也提供了一些默认的规则，但是并不是统一的标准，需要自己定制</li>
<li>ESLint（法官）也可以基于standard（法律）这套相对标准的规则进行验证。</li>
</ul>
<h3 id="常见语法规则"><a href="#常见语法规则" class="headerlink" title="常见语法规则"></a>常见语法规则</h3><ul>
<li>使用两个字符实现代码缩进</li>
<li>字符串使用单引号</li>
<li>不再有冗余的变量（变量一旦定义必须使用）</li>
<li>结尾无分号</li>
<li>行首不要以，开头</li>
<li>关键字后面添加空格</li>
<li>函数名后加空格</li>
<li>坚持使用全等&#x3D;&#x3D;&#x3D;，放弃&#x3D;&#x3D;</li>
<li><del>一定要处理Node.js中的err</del></li>
<li><del>使用浏览器全局变量添加window</del></li>
<li>……</li>
</ul>
<blockquote>
<p>关于代码的语法的修改，可以利用lint命令：<code>npm run lint</code></p>
<p>这个命令可以自动规范化代码的风格。</p>
<p>如何知道报错的原因？赋值报错的特征字符串（错误信息结尾），去<a target="_blank" rel="noopener" href="https://standardjs.com/rules-zhcn.html#javascript-standard-style">stardust</a>官方网站插值即可</p>
</blockquote>
<h3 id="自定义规则"><a href="#自定义规则" class="headerlink" title="自定义规则"></a>自定义规则</h3><blockquote>
<p><code>npm run lint</code> 必须符合条件才能修改</p>
</blockquote>
<ul>
<li>.eslintrc.js配置文件可以配置启用或者禁用那些规则</li>
<li>关于规则的取值<ul>
<li>off&#x2F;0 表示关闭规则的验证</li>
<li>warn&#x2F;1 表示出错后进行警告（在命令行出现，不影响页面功能）</li>
<li>error&#x2F;2 表示出错后页面进行错误提示，无法进一步开发</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">rules</span>: &#123;</span><br><span class="line">  <span class="string">&#x27;no-console&#x27;</span>: process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&#x27;production&#x27;</span> ? <span class="string">&#x27;error&#x27;</span> : <span class="string">&#x27;off&#x27;</span>, <span class="comment">// allow console during development</span></span><br><span class="line">  <span class="string">&#x27;no-debugger&#x27;</span>: process.<span class="property">env</span>.<span class="property">NODE_ENV</span> === <span class="string">&#x27;production&#x27;</span> ? <span class="string">&#x27;error&#x27;</span> : <span class="string">&#x27;off&#x27;</span>, <span class="comment">// allow debugger during development</span></span><br><span class="line">  <span class="comment">// 以下为该项目自定义部分</span></span><br><span class="line">  <span class="string">&#x27;indent&#x27;</span>: [<span class="number">2</span>, <span class="number">2</span>], <span class="comment">//缩进风格 - 开启缩进2格</span></span><br><span class="line">  <span class="string">&#x27;no-spaced-func&#x27;</span>: <span class="number">2</span>, <span class="comment">//函数调用时 函数名与()之间不能有空格 - 开启</span></span><br><span class="line">  <span class="string">&#x27;no-const-assign&#x27;</span>: <span class="number">2</span>, <span class="comment">//禁止修改const声明的变量 - 开启</span></span><br><span class="line">  <span class="string">&#x27;space-before-function-paren&#x27;</span>: [<span class="number">0</span>, <span class="string">&#x27;always&#x27;</span>], <span class="comment">//函数定义时括号前面要有空格 - 关闭</span></span><br><span class="line">  <span class="string">&#x27;eol-last&#x27;</span>: <span class="number">0</span>, <span class="comment">//文件以单一的换行符结束 - 关闭</span></span><br><span class="line">  <span class="string">&#x27;camelcase&#x27;</span>: <span class="number">0</span>, <span class="comment">//强制驼峰法命名 - 关闭</span></span><br><span class="line">  <span class="string">&#x27;no-undef&#x27;</span>: <span class="number">0</span>, <span class="comment">//不能有未定义的变量 - 关闭</span></span><br><span class="line">  <span class="string">&#x27;no-alert&#x27;</span>: <span class="number">0</span>, <span class="comment">//禁止使用alert confirm prompt - 关闭</span></span><br><span class="line">  <span class="string">&#x27;arrow-parens&#x27;</span>: <span class="number">0</span>, <span class="comment">//箭头函数用小括号括起来 - 关闭</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结  “quotes”: [“error”, “double”]表示，必须使用双引号，否则报错</p>
<p>double 表示双引号</p>
<p>single 表示单引号</p>
<p>blacktick 表示反引号</p>
</blockquote>
<ul>
<li>规则的值如果是数组，那么数组两项的作用<ul>
<li>第一项作用：规则的<a target="_blank" rel="noopener" href="https://cn.eslint.org/docs/user-guide/getting-started">验证级别</a></li>
<li>第二项作用：规则的配置选项，详细的规则选项参考<a target="_blank" rel="noopener" href="https://standardjs.com/rules-zhcn.html#javascript-standard-style">ESLint</a></li>
</ul>
</li>
</ul>
<blockquote>
<p>1、Vue脚手架项目提供了代码的规则验证<br>谁负责规则的验证？ESLint<br>谁负责提供规则？Standard<br>ESLint基于Standard进行验证<br>2、如果我们写的代码不符合规则，就会报错<br>3、所有需要解决错误才能继续开发<br>4、但是人工方式解决错误有点儿麻烦<br>怎么人工解决错误？通过查看页面的提示（行号；错误特征字符串（错误信息的后面）），如果认识英文，那么直接就能够理解错误，如果理解不了英文，就把特征字符串复制，然后去standard官方网站（<a target="_blank" rel="noopener" href="https://standardjs.com/rules-zhcn.html#javascript-standard-style%EF%BC%89%E6%9F%A5%E8%AF%A2%E5%8D%B3%E5%8F%AF">https://standardjs.com/rules-zhcn.html#javascript-standard-style）查询即可</a><br>5、所有可以借助命令自动解决<code>npm run lint</code><br>6、如果希望自己再定义一下默认的规则，那么可以修改配置文件.eslintrc<br>如何修改？修改rules选项即可</p>
</blockquote>
<h3 id="vscode配置"><a href="#vscode配置" class="headerlink" title="vscode配置"></a>vscode配置</h3><blockquote>
<p>我们希望vscode帮我们解决代码规范问题（如果我们写的代码不规范，那么vscode帮我们修复问题）</p>
<p>脚手架的代码规范和vscode的代码规范示范一致？不一致</p>
<p>如何解决？可以修改脚手架的eslint配置让他迎合vscode；修改vscode配置去迎合脚手架。</p>
</blockquote>
<ul>
<li>需要安装两个插件<ul>
<li>ESLint 负责验证规则</li>
<li>Vetur 负责提供vue的语法规则</li>
</ul>
</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// # 每次保存的时候自动格式化 </span></span><br><span class="line"><span class="attr">&quot;editor.formatOnSave&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"><span class="comment">// # 每次保存的时候将代码按eslint格式进行修复</span></span><br><span class="line"><span class="comment">// &quot;eslint.autoFixOnSave&quot;: true, (已经过期)</span></span><br><span class="line"><span class="attr">&quot;editor.codeActionsOnSave&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;source.fixAll.eslint&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<ul>
<li>vue代码风格配置<ul>
<li>Vue代码风格依赖了 <a target="_blank" rel="noopener" href="https://prettier.io/docs/en/options.html#trailing-commas">Prettier</a></li>
</ul>
</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;vetur.validation.template&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;vetur.format.defaultFormatter.html&quot;</span><span class="punctuation">:</span> <span class="string">&quot;js-beautify-html&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;vetur.format.defaultFormatterOptions&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;prettier&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;semi&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span> <span class="comment">//不加分号</span></span><br><span class="line">        <span class="attr">&quot;singleQuote&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span> <span class="comment">//用单引号</span></span><br><span class="line">        <span class="attr">&quot;trailingComma&quot;</span><span class="punctuation">:</span> <span class="string">&quot;none&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;bracketSpacing&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;tabWidth&quot;</span><span class="punctuation">:</span> <span class="number">2</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;arrowParens&quot;</span><span class="punctuation">:</span> <span class="string">&quot;avoid&quot;</span></span><br><span class="line">    <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;js-beautify-html&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="comment">// &quot;wrap_line_length&quot;: 250, //换行长度</span></span><br><span class="line">        <span class="attr">&quot;wrap_attributes&quot;</span><span class="punctuation">:</span> <span class="string">&quot;auto&quot;</span><span class="punctuation">,</span> <span class="comment">//属性换行 force-aligned</span></span><br><span class="line">        <span class="comment">// &quot;end_with_newline&quot;: false</span></span><br><span class="line">    <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>基于Vscode配置可以自动格式化代码并且自动修复代码的不规范的格式</li>
<li>如果vscode格式的结果不符合要求，可以修改Vscode配置，也可以修改项目中.eslintrc配置文件</li>
</ol>
</blockquote>
<h2 id="Vant基本使用"><a href="#Vant基本使用" class="headerlink" title="Vant基本使用"></a>Vant基本使用</h2><blockquote>
<p>目标：属性Vant组件库的基本使用</p>
<p><a target="_blank" rel="noopener" href="https://youzan.github.io/vant/#/zh-CN/">vant</a></p>
</blockquote>
<ul>
<li>安装依赖包</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vant</span><br></pre></td></tr></table></figure>

<ul>
<li>导入包和样式 <code>main.js</code>设置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vant</span> <span class="keyword">from</span> <span class="string">&#x27;vant&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;vant/lib/index.css&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vant</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>使用组件</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;van-button type=&quot;primary&quot;&gt;主要按钮&lt;/van-button&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>以上做法是完整导入，在项目开发阶段使用，配置方便节省时间，将来上线的时候可以使用按需导入。</p>
</blockquote>
<h2 id="屏幕适配配置-移动端"><a href="#屏幕适配配置-移动端" class="headerlink" title="屏幕适配配置 移动端"></a>屏幕适配配置 <code>移动端</code></h2><blockquote>
<p>屏幕适配：页面在不同的尺寸的手机中显示相似的效果（等比缩放）</p>
</blockquote>
<ul>
<li>百分比（自适应宽度，不处理高度）</li>
<li>自适应（自适应宽度，不处理高度）</li>
<li>响应式（多端适配：PC端、移动端、IPAD端。。。。）</li>
<li>Rem适配：针对移动适配（页面在不同的尺寸的手机上等比缩放-包括宽度和高度）</li>
</ul>
<blockquote>
<ol>
<li>&#x3D;&#x3D;UI负责给一个移动端设计稿 750px&#x3D;&#x3D;</li>
<li>font-size &#x3D; 100px &#x3D; 1rem</li>
<li>设计稿图书 123px * 62px </li>
<li>页面中样式写法 1.23&#x2F;2rem * 0.62&#x2F;2rem</li>
<li>iphone6&#x3D;屏幕的宽度w&#x2F;font-size基准值p&#x3D;固定值g&#x3D;3.75rem</li>
<li>其他手机&#x3D;屏幕的宽度w1&#x2F;font-size基准值p1&#x3D;固定值g&#x3D;3.75rem</li>
<li>w1&#x2F;p1 &#x3D; w&#x2F;p ，根据公式计算p1值，给当前手机的页面的html元素的font-size设置基准值即可</li>
</ol>
</blockquote>
<blockquote>
<p>Vant 中的样式默认使用<code>px</code>作为单位，如果需要使用<code>rem</code>单位，推荐使用以下两个工具</p>
<p><a target="_blank" rel="noopener" href="https://github.com/cuth/postcss-pxtorem">postcss-pxtorem</a> 是一款 postcss 插件，用于将单位转化为 rem</p>
<p><a target="_blank" rel="noopener" href="https://github.com/amfe/lib-flexible">lib-flexible</a> 用于设置 rem 基准值</p>
</blockquote>
<ul>
<li>安装依赖包<ul>
<li>postcss-pxtorem (把px单位转换为rem单位)</li>
<li>lib-flexable (设置html的font-size)</li>
</ul>
</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm i postcss-pxtorem@5.1.1 -D</span><br><span class="line">// 如果按照5.1.1版本后依然报错，按照提示安装如下包即可</span><br><span class="line">npm install @vue/composition-api</span><br><span class="line">// -----------------------------------------------------------</span><br><span class="line">npm i amfe-flexible -S</span><br></pre></td></tr></table></figure>

<h3 id="配置postcss-config-js-需要手动创建-350px适配"><a href="#配置postcss-config-js-需要手动创建-350px适配" class="headerlink" title="配置postcss.config.js 需要手动创建 350px适配"></a>配置postcss.config.js <code>需要手动创建</code> <code>350px适配</code></h3><ul>
<li>rootValue 表示以该值作为rem的基准值（vant最佳显示状态）</li>
<li>propList那些css属性的像素值转换为rem单位</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: &#123;</span><br><span class="line">    <span class="comment">// 控制样式属性前面自动添加前缀</span></span><br><span class="line">    <span class="attr">autoprefixer</span>: &#123;&#125;,</span><br><span class="line">    <span class="string">&#x27;postcss-pxtorem&#x27;</span>: &#123;</span><br><span class="line">      <span class="comment">// html的font-size规定为37.5px</span></span><br><span class="line">      <span class="comment">// 为什么是37.5？因为iPhone6的尺寸是375px</span></span><br><span class="line">      <span class="attr">rootValue</span>: <span class="number">37.5</span>,</span><br><span class="line">        </span><br><span class="line">      <span class="comment">// 控制那些样式的属性需要转换</span></span><br><span class="line">      <span class="attr">propList</span>: [<span class="string">&#x27;*&#x27;</span>],</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：postcss-pxtorem负责把px单位转换为rem单位</p>
</blockquote>
<ul>
<li>导入  <code>main.js</code>设置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 html跟 font-size的数值</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;amfe-flexible&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：amfe-flexible用于动态计算当前页面的HTML的font-size基准值并且动态设置</p>
<ol>
<li>rootValue 是转换px的基准值，参考设备iPhone6，设备宽度375px。（Vant的设计稿是375）</li>
<li>flexible 在iPhone6设备设置的  html—&gt;font-size 也为37.5px 。</li>
</ol>
</blockquote>
<h3 id="配置postcss-config-js-需要手动创建-750px适配"><a href="#配置postcss-config-js-需要手动创建-750px适配" class="headerlink" title="配置postcss.config.js 需要手动创建 750px适配"></a>配置postcss.config.js <code>需要手动创建</code> <code>750px适配</code></h3><blockquote>
<p>Vant 基础的适配是 375px 一般设计稿是750px 如果改成750px 需要格外设置</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">plugins</span>: &#123;</span><br><span class="line">    <span class="string">&#x27;postcss-pxtorem&#x27;</span>: &#123;</span><br><span class="line">      <span class="comment">// HTML的font-size基准值（不负责设置这个基准值）</span></span><br><span class="line">      <span class="comment">// 用于postcss-pxtorem插件把px转换为rem</span></span><br><span class="line">      <span class="comment">// rootValue: 37.5,</span></span><br><span class="line">      rootValue (&#123; file &#125;) &#123;</span><br><span class="line">        <span class="comment">// file参数表示Vant组件库样式文件的路径 import &#x27;vant/lib/index.css&#x27;</span></span><br><span class="line">        <span class="comment">// vant设计稿是375px</span></span><br><span class="line">        <span class="comment">// 标准的设计稿应该是750px</span></span><br><span class="line">        <span class="keyword">return</span> file.<span class="title function_">indexOf</span>(<span class="string">&#x27;vant&#x27;</span>) !== -<span class="number">1</span> ? <span class="number">37.5</span> : <span class="number">75</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 规定哪些属性需要转换成rem</span></span><br><span class="line">      <span class="attr">propList</span>: [<span class="string">&#x27;*&#x27;</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>总结：</p>
<ol>
<li>vant设计稿是375px</li>
<li>标准的设计稿应该是750px</li>
<li>通过判断样式文件的特征区分到底是Vant内部样式，还是我们自定义样式，根据样式文件的区别设置不同的基准值即可。</li>
</ol>
</blockquote>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>熟悉项目的基本业务</li>
<li>初始化项目</li>
<li>代码的规范化处理<ul>
<li>ESLint 负责验证代码的规范</li>
<li>Standard 提供校验规则</li>
<li>可以使用npm run lint实现自动修复格式问题</li>
<li>基于Vscode自动格式化并处理规范问题</li>
</ul>
</li>
<li>Vant基本使用<ul>
<li>先安装包，然后安装官方文档练习使用相关组件用法</li>
</ul>
</li>
<li>屏幕适配的配置<ul>
<li>屏幕是否原理：基于rem的适配原理</li>
<li>基于Vant提供的架手架环境配置适配方案<ul>
<li>自动把px转换为rem</li>
<li>自动计算HTML的font-size的基准值并动态设置</li>
<li>兼容标准750设计稿用法</li>
</ul>
</li>
</ul>
</li>
</ul>

        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/06/02/Vue_Mobile_Projects/2_ready/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/06/02/Vue_Mobile_Projects/2_ready/";
            const title         = "「1. Vue移动端 项目初始化」";
            const excerpt       = `::: tip 介绍
Vue移动端项目初始化:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vant/" rel="tag">Vant</a>, <a class="tag-none-link" href="/tags/Vue/" rel="tag">Vue</a>, <a class="tag-none-link" href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">Vue移动端</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 0. Vue使用脚手架搭建项目" href="/2021/06/01/Vue_Mobile_Projects/1_webpack/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" 2. Vue移动端 项目架构" href="/2021/06/03/Vue_Mobile_Projects/3_Frame/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>